<template>
  <div>
        <myheader></myheader>
        <section class="featured-block text-center">
        <div class="container">
            <div>
            <Breadcrumb :datas="datas"></Breadcrumb>
            </div>
        </div>
        </section>
    <table>
      <tr>
        <td>
          用户名：
          <input type="text" v-model="username" placeholder="输入用户名" disabled='disabled'/>&emsp;
        </td>
        <td>{{namemsg}}</td>
      </tr>
      <tr>
        <td>
          密&emsp;码：
          <input type="text" v-model="password" placeholder="密码" />&emsp;
        </td>
        <td>{{psdmsg}}</td>
      </tr>
      <tr style="float:left">
        <td>验证码：</td>
        <td><img class='code'  :src="imgcode" alt="图片加载失败" @click="get_code"></td>
      </tr>
      <tr>
        <td>&emsp;&emsp;&emsp;
          <input type="text" v-model="code" placeholder="请输入验证码"/>
        </td>
        <td>{{codemsg}}</td>
      </tr>
      <tr>
        <td>&emsp;
          <Button @click="submit" color="blue" width="100px">修改</Button>
        </td>
      </tr>
    </table>

    <footer class="footer">
      <div class="container">@v3u.cn</div>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
import myheader from "./myheader.vue";
export default {
    data() {
        return {
        msg: "这是一个变量",
        //面包屑导航变量
        datas: [
            { title: "首页", route: { name: "index" } },
            { title: "修改", route: { name: "Update" } }
        ],
        username: "",
        password: "",
        type: 0,
        phone: "",
        num: 0,
        code:'',
        charEle:'',
        namemsg:'',
        psdmsg:"",
        phonemsg:'',
        codemsg:'',
        imgcode:"",
        };
    },  
    // components注册组件 可以使用对应的标签来展示
    components: {
        myheader: myheader,
    },
    created(){
        this.username=localStorage.getItem('username')
        this.get_code()
        this.watch_login()
    },
    methods:{
        watch_login(){
            if(localStorage.getItem('username')==null){
                this.$router.push({name:'index'})
            }
        },
        // 获取验证码
        get_code(){
        axios({
              url:"http://127.0.0.1:8000/myapp/mycode/",
              method:'get',
              responseType: 'blob',
          }).then(res=>{
              this.imgcode  = window.URL.createObjectURL(res.data);
              //src 就是一个可以显示图片的相对路径。因为window.URL.crateObjectURL(blob)已经进行了转换
        })
      },
      submit(){
        // 简单判断
        if(this.password==""){  
                this.psdmsg="密码为空";
                return false;
        }else if(!/^(?:(?=.*[a-zA-Z])(?=.*[0-9])).{4,}$/.test(this.password)){
            this.psdmsg="密码格式错误 以数字字母符号组成"
            return false;
        }
        if (this.code==""){
            this.codemsg="验证码为空";
            return false 
         }
         //获取数据
        var formdata=new FormData();
        formdata.append("username",this.username)
        formdata.append("password",this.password)
        formdata.append("code",this.code)
        axios({
            url:"http://127.0.0.1:8000/myapp/update/",
            method:'post',
            data:formdata,
        }).then(res=>{
            if(res.data.code==200){     
                this.$Message(res.data.msg);
                localStorage.setItem('username',res.data.username)
                this.$router.push('/')
            }else{
              this.$Message(res.data.msg);
              setTimeout("window.location.reload()",2);
            }
        })

      }
    }

}
</script>

<style>
.td {
  padding: 10px;
}
.code{
  cursor: pointer;
}
</style>